<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>4.列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style type="text/css">
			#option {
				flex-direction: row;
				display: flex;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<div id="option">
				<input type="text" placeholder="请输入名字" v-model="keyWorld" />
				<!-- 一定要通过这种点击事件实现这种排序吗，不一定，看下面 -->
				<!-- <button @click="upSort">年龄升序</button>
				<button @click="downSort">年龄降序</button>
				<button @click="recover">恢复</button> -->

				<button @click="sortType=1">年龄升序</button>
				<button @click="sortType=2">年龄降序</button>
				<button @click="sortType=0">原顺序</button>
			</div>
			<ul>
				<li v-for="(person,index) in sortRet" :key="person.id">
					{{person.name}}-{{person.age}}-{{person.sex}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					keyWorld: "",
					test: 1,
					sortType: "0", //0 原顺序，1 升序，2 降序
					persons: [{
							id: '002',
							name: '李四',
							age: 16,
							sex: "男"
						},
						{
							id: '001',
							name: '张三',
							age: 11,
							sex: "男"
						},
						{
							id: '003',
							name: '王二',
							age: 14,
							sex: "男"
						},
						{
							id: "004",
							name: "二师兄",
							age: 500,
							sex: "男"
						},
						{
							id: '005',
							name: '四季',
							age: 18,
							sex: "女"
						}
					],
					sortPersons: []
				},
				/**
				 * watch: {
					keyWorld: {
						immediate: true,
						handler(val) {
							this.sortPersons = this.persons.filter((p) => {
								let ret = p.name.indexOf(val) !== -1 ||
									p.age == new Number(val) ||
									p.sex.indexOf(val) !== -1
								return ret;
							})
						}
					}
				},
				methods: {
					upSort() {
						filter = this.persons.filter((p) => {
							let ret = p.name.indexOf(this.keyWorld) !== -1 ||
								p.age == new Number(this.keyWorld) ||
								p.sex.indexOf(this.keyWorld) !== -1
							return ret;
						})
						this.sortPersons = filter.sort((a, b) => a.age - b.age)
					},
					downSort() {
						filter = this.persons.filter((p) => {
							let ret = p.name.indexOf(this.keyWorld) !== -1 ||
								p.age == new Number(this.keyWorld) ||
								p.sex.indexOf(this.keyWorld) !== -1
							return ret;
						})
						this.sortPersons = filter.sort((a, b) => b.age - a.age)
					},
					recover() {
						filter = this.persons.filter((p) => {
							let ret = p.name.indexOf(this.keyWorld) !== -1 ||
								p.age == new Number(this.keyWorld) ||
								p.sex.indexOf(this.keyWorld) !== -1
							return ret;
						})
						this.sortPersons = filter;
					}
				}
				 */
				/**
				 * 点击升序降序，修改sortType的值，computed用到了sortType，每次修改sortType，都会重新计算computed里面的代码。
				 */
				computed: {
					sortRet() {
						const arr = this.persons.filter((p) => {
							return p.name.indexOf(this.keyWorld) !== -1 ||
								p.age == new Number(this.keyWorld) ||
								p.sex.indexOf(this.keyWorld) !== -1
						})
						if (this.sortType) {
							arr.sort((p1, p2) => {
								return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age
							})
						}
						return arr;
					}
				},
			})
		</script>
	</body>
</html>